<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>

    <style>
        /* 标签+组合 选择器 */
        table,th,td{
            border: 1px solid #9999;
        }
        table{
            width: 50%;
            margin: auto;
            text-align: center;
        }
        th,td{
            height: 30px;
        }

        caption{
            color: white;
            text-shadow: 2px 2px 4px #000;
            font-size: 30px;
        }

        img{
            width: 100px;
            height: 120px;
        }
    </style>
</head>
<body>
    <!-- 表格最全的写法 -->
    <table>
        <caption>OA办公系统</caption>
        <!-- 定义表头 -->
        <thead>
            <!-- 定义行 -->
            <tr>
                <!-- 表头中的列th - 自带居中并且加粗的效果的 -->
                <th><input type="checkbox"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>头像</th>
            </tr>
        </thead>

        <!-- 定义表格的主体内容 - ui设计 - ps - 婚纱照 -->
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>1001</td>
                <td>吴签</td>
                <td><img src="../imgs/001.png"></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1002</td>
                <td>霍针</td>
                <td><img src="../imgs/002.png" alt="图片加载失败"></td>
            </tr>
        </tbody>

        <!-- 表的末尾 -->
        <tfoot>
            <tr>
                <!-- 合并列 -->
                <td rowspan="2">总价:100</td>
                <td></td>
                <td colspan="2"></td>
               
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

    <hr>
    
    <!-- tbody虽然是省略了,但是浏览器默认还是会提供的 -->
    <table>
        <caption>OA办公系统</caption>
        <!-- 定义表头 -->
    
            <!-- 定义行 -->
            <tr>
                <!-- 表头中的列th - 自带居中并且加粗的效果的 -->
                <th><input type="checkbox"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>头像</th>
            </tr>
        <!-- 定义表格的主体内容 - ui设计 - ps - 婚纱照 -->
   
            <tr>
                <td><input type="checkbox"></td>
                <td>1001</td>
                <td>吴签</td>
                <td><img src="../imgs/001.png"></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1002</td>
                <td>霍针</td>
                <td><img src="../imgs/002.png" alt="图片加载失败"></td>
            </tr>
   

        <!-- 表的末尾 -->
  
            <tr>
                <!-- 合并列 -->
                <td rowspan="2">总价:100</td>
                <td></td>
                <td colspan="2"></td>
               
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </table>
</body>
</html>